document.title = config.title.text;
var TITLE_SRC = config.title.src;
var TITLE_MASK = config.title.mask;
var TITLE_WIDTH = config.title.width;
var TITLE_HEIGHT = config.title.height;
var TITLE_LEFT = config.title.left;
var TITLE_TOP = config.title.top;
var elementTabCells = [];
var elementViews = [];
config.tabCells.forEach(function (e, index) {
  elementTabCells.push(`<img src="${e.avatar}" class="tab-cell goto-view ${index === 0 ? 'active' : ''}" data-target="${e.target}" style="${e.style}"/>`);
});
$('#cnt').append(elementTabCells.join(''));

config.views.forEach(function (e, index) {
  var style = `background-image: url('${e.bg}');${e.style}`;
  var html = viewHtml(e);
  elementViews.push(`<div id="${e.key}" class="view ${index === 0 ? 'active' : ''}" style="${style}">${html}</div>`);
})

function setTitleHtml(e) {
  var titleClassArray = ['title']
  if (e.title.type === 1) {
    titleClassArray.push('audio-button restart');
  }
  if (e.title.type === 3) {
    titleClassArray.push('audio-button');
  }
  var titleHtml = [`<img src="${TITLE_SRC}" class="${titleClassArray.join(' ')}" data-audio="${e.title.audioSrc}" style="left:${TITLE_LEFT};top:${TITLE_TOP};"/>`];

  if (e.title.hasMask) {
    titleHtml.push(`<div class="title-b" style="height: ${TITLE_HEIGHT};background-image:url(${TITLE_MASK});left:${TITLE_LEFT};top:${TITLE_TOP};"></div>`);
    titleHtml.push(`<i class="icon-audio title-audio audio-button-2" data-audio="${e.title.audioSrc}" style="left:${config.title.audioButton.left};top:${config.title.audioButton.top};"></i>`);
  }
  return titleHtml.join('');
}

function setVideoHtml(e) {
  return `<div class="video-warp" style="width:${e.video.width};height:${e.video.height};left:${e.video.left};top:${e.video.top};">
         <video id="video" src="${e.video.src}" controls playsinline x-webkit-airplay webkit-playsinline preload="auto" x5-playsinline></video>
         <img class="video-avatar" src="${e.video.avatar}" style="width:${e.video.width};height:${e.video.height};"/>
       </div>`
}

function setCntHtml(cnt) {
  var htmls = [];
  cnt.forEach(function (e) {
    if (e.type === 'img') {
      htmls.push(`<img class="${e.key}" src="${e.src}" style="width:${e.width};height:${e.height};left:${e.left};top:${e.top};"/>`);
      if (e.audioButton) {
        e.audioButton.forEach(function (e2) {
          htmls.push(`<i class="icon-audio audio-button" data-audio="${e2.audio}" style="left:${e2.left};top:${e2.top};"></i>`);
        });
      }
    } else if (e.type === 'div') {
      htmls.push(`<div class="${e.key} ${e.isScrollbar ? 'scrollbar' : ''}" style="width:${e.width};height:${e.height};left:${e.left};top:${e.top};">`);
      if (e.isScrollbar) {
        htmls.push(`<div class="scrollbar-after"></div>`);
        htmls.push(`<div class="scrollbar-cnt">`);
      }
      htmls.push(`<img src="${e.src}"/>`);
      if (e.audioButton) {
        e.audioButton.forEach(function (e2) {
          htmls.push(`<i class="icon-audio audio-button" data-audio="${e2.audio}" style="left:${e2.left};top:${e2.top};"></i>`);
        });
      }
      if (e.isScrollbar) {
        htmls.push(`</div>`);
      }
      htmls.push(`</div>`);
    }
  });
  return htmls.join('');
}

function setGotoButton(arr) {
  var tempArr = [];
  arr.forEach(function (e) {
    tempArr.push(`<div class="goto-view" data-target="${e.target}" style="width:${e.width};height:${e.height};left:${e.left};top:${e.top};"></div>`);
  });
  return tempArr.join('')
}

function setShiJu() {
  var tempArr = [];
  config.shiJu.forEach(function (e, index) {
    tempArr.push(`<div class="shi-ju shi-ju-${index}" style="height:${e.height};background-image: url(${e.mask});left:${e.left};top:${e.top};"></div>`);
    tempArr.push(`<div class="shi-ju-warp audio-button restart" data-audio="${e.audio}" style="width:${e.width};height:${e.height};left:${e.left};top:${e.top};"></div>`);
  });
  return tempArr.join('')
}

function setJieShi(arr) {
  var tempArr = [];
  arr.forEach(function (e) {
    tempArr.push(`<div class="shi-ju-jie-shi audio-button" data-audio="${e.audio}" style="width:${e.width};height:${e.height};left:${e.left};top:${e.top};"></div>`);
  });
  return tempArr;
}

function setZhuShi(arr) {
  var tempArr = [];
  arr.forEach(function (e, index) {
    tempArr.push(`<i class="icon-shi audio-button" data-target="#shi_${index}" data-audio="${e.audio}" style="left:${e.left};top:${e.top};"></i>`);
    tempArr.push(`<div class="shi" id="shi_${index}" style="left:${e.cnt.left};top:${e.cnt.top};"><img src="${e.cnt.src}"/><i class="icon-shi-close"></i></div>`);
  });
  return tempArr;
}

function viewHtml(e) {
  var html = []
  html.push(setTitleHtml(e));
  if (e.isVideo) {
    html.push(setVideoHtml(e));
  }
  if (e.cnt) {
    html.push(setCntHtml(e.cnt));
  }
  if (e.gotoButton) {
    html.push(setGotoButton(e.gotoButton));
  }
  if (e.hasShiJu) {
    html.push(setShiJu());
  }
  if (e.jieShi) {
    html.push(setJieShi(e.jieShi));
  }
  if (e.zhuShi) {
    html.push(setZhuShi(e.zhuShi));
  }
  return html.join('');
}

$('#cnt').append(elementViews.join(''));
